<%--
  Created by IntelliJ IDEA.
  User: hao
  Date: 2017/12/6
  Time: 23:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/css/editormd.css">--%>
        <link rel="stylesheet" href="http://pandao.github.io/editor.md/examples/css/style.css" />
        <link rel="stylesheet" href="http://pandao.github.io/editor.md/css/editormd.css" />
        <title>hello world</title>
</head>
<body>
<div id="my-editormd">
    <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
    <!-- 注意：name属性的值-->
    <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>

<script src="http://pandao.github.io/editor.md/examples/js/jquery.min.js"></script>
<script src="http://pandao.github.io/editor.md/editormd.js"></script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("my-editormd", {
            width: "90%",
            height: 740,
            path : '${pageContext.request.contextPath}/lib/',
            toolbarIcons : function() {
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                // Using "||" set icons align right.
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                    "help", "info","       ","articlemodel"
                ]
            },
            toolbarIconsClass : {
                articlemodel : "fa-gears"  // 指定一个FontAawsome的图标类
            },
            toolbarCustomIcons : {
                articlemodel : "<img style='cursor: pointer;' src=\"../../img/模板.png\"  onclick='articlemodel()' >"
            },
            codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "./php/upload.php",
            onload : function() {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });
    });
    //editormd("my-editormd", {markdown:"sdsadsadsa"});
    //解决a标签的跳转方法
    $(function () {
        var a=0;
        var titleEl = document.getElementsByTagName("body")[0];
        titleEl.addEventListener("DOMSubtreeModified", function(evt) {
            a++;
            console.log(a);
            $("a").attr("target","_blank");
        }, false);
    });
    function articlemodel() {
        alert("选择模板哦")
    }
</script>
</body>
</html>
